<template>
    <div class="whole-wrapper">
       <div class="wrapper">
            <main>
                <TopNav/>
                <div class="banner-wrapper">
                    <div class="banner">
                        <h1>Zgn-UI</h1>
                        <h2>基于<a href="http://43.140.205.84:7001/">twzgn.cn</a>风格的UI组件库</h2>
                        <p class="actions">
                            <a href="https://gitee.com/tw-zgn/vue3-zgn-ui" class="gitee"><strong>gitee</strong></a>
                            <router-link to="/doc" class="start">开始</router-link>
                        </p>
                    </div>
                    <div class="photo">
                        <div class="photo-icon-left">
                            <svg  class="zujian1">
                                <use xlink:href="#icon-zujian1"></use>
                            </svg>
                        </div>
                        <div class="photo-icon-right">
                            <div class="photo-icon">
                                <svg class="zujian2">
                                    <use xlink:href="#icon-zujian2"></use>
                                </svg>
                            </div>
                            <div class="photo-icon"> 
                                <svg class="zujian3" >
                                    <use xlink:href="#icon-zujian3"></use>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div> 
            </main> 
            <div class="zgn-nav">
                <div class="nav-label">
                    <div class="nav-icon">
                        <svg class="icon" >
                            <use xlink:href="#icon-Vue"></use>
                        </svg>
                    </div>
                    <div class="nav-content">
                        <div class="title"><strong>基于vu3</strong></div>
                        <div>全部采用组合式Api</div>
                    </div>
                </div>
                <div class="nav-label">
                    <div class="nav-icon">
                        <iconify-icon icon="logos:vitejs" width="50" ></iconify-icon>
                    </div>
                    <div class="nav-content">
                        <div class="title"><strong>基于Vite</strong></div>
                        <div>新一代急速构建工具</div>
                    </div>
                </div>
                <div class="nav-label">
                    <div class="nav-icon">
                        <svg class='icon'>
                            <use  xlink:href="#icon-liangzitongji"/>
                        </svg>
                    </div>
                    <a href="http://43.140.205.84:7001/" class="nav-content">
                        <div class="title"><strong>基于twzgn</strong></div>
                        <div>简洁的在线Markdown编辑器</div>
                    </a>
                </div>
                <div class="nav-label">
                    <div class="nav-icon">
                        <svg class="icon" >
                            <use xlink:href="#icon-typescript"></use>
                        </svg>
                    </div>
                    <div class="nav-content">
                        <div class="title"><strong>基于TypeScript</strong></div>
                        <div>更快</div>
                    </div>
                </div>
            </div>   
       </div>        
    </div>
</template>

<script lang="ts">
import TopNav from "../components/TopNav.vue";
export default {
    name: "home",
    components: { TopNav }
}
</script>

<style lang="scss" scoped>
.whole-wrapper{
    display:flex;
    flex-direction: column;
    >.wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        >main{
            background:linear-gradient(143deg, rgba(225,185,228,1) 0%, rgba(148,187,233,1) 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100vw;
            >.banner-wrapper{
                height: 600px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                >.banner {
                    padding-top:150px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    >h1{
                        font-size: 80px;
                        margin-top:20px ;
                        color:linear-gradient(143deg, rgba(225,185,228,1) 0%, rgba(148,187,233,1) 100%);             
                    }
                    >h2{
                        margin-top:20px ;
                        font-size: 20px;
                        >a{
                            /* border-bottom: 2px solid rgb(150, 146, 146); */
                            box-shadow:1px 1px 2px 2px #a3a5a5;
                            padding:5px;
                            margin:10px;

                            &:hover{
                                color: rgb(17, 17, 182);
                                box-shadow:1px 1px 2px 2px #a3a5a5;
                                border-radius: 5px;
                                border:none
                            }
                        }
                    }
                    > .actions{
                        padding: 8px 0;
                        margin-top:20px ;
                        a {
                            margin:0 20px;
                            display: inline-block;
                            height: 30px;
                            line-height: 30px;
                            padding: 0 15px;
                            border-radius: 10px;  
                        }
                        >.gitee:hover{
                            box-shadow:1px 1px 2px 2px #7f8181;
                        }
                        >.start{
                            background: #2e9265;
                            color: rgb(226, 216, 216);
                            &:hover{
                                box-shadow:1px 1px 2px 2px #a3a5a5;
                            }
                        }
                    }
                }
                >.photo{
                    margin-left: 80px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    >.photo-icon-left{
                        >svg{
                            width: 100px;
                            height: 100px;
                            fill:#217e4e
                        }
                    }
                    >.photo-icon-right{
                        >.photo-icon{
                            >.zujian2{
                                width: 100px;
                                height: 100px;
                                
                                fill:#856a1a;
                            }
                            >.zujian3{
                                width: 100px;
                                height: 100px;
                                fill:#295786;
                            }
                    }
                    }

                }
                @media (max-width:600px) {
                    >.photo{
                         display: none;
                    }
                }
            }
        }
        >.zgn-nav{
            display: flex;
            margin-top: 80px;
            justify-content: center;
            flex-wrap: wrap;
            
            >.nav-label{
                width: 300px;
                padding:10px;
                display: flex;
                align-items: center;
                >.nav-icon{
                    margin-right:20px ;
                    >.icon{
                        width: 50px;
                        height: 50px ;
                    }
                }
                >.nav-content{
                    font-size: 14px;
                    display: flex;
                    flex-direction: column;
                    >.title{
                        font-size: 16px;
                        margin-bottom: 5px;
                    }
                }
            }
        }
        @media (max-width:600px) {
            .zgn-nav{
                margin-top: 20px;
            }
        }
    }
}
</style>